<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../../plugins/element-ui/index.css"/>
    <!--    <link rel="stylesheet" href="../../styles/common.css"/>-->
    <link rel="stylesheet" href="../../styles/page.css"/>
    <link rel="stylesheet" href="../../styles/icon_echarts/iconfont.css"/>
    <!--    <style>-->
    <!--        #member-app  .notAdmin::after{-->
    <!--            border: 0 !important;-->

    <!--        }-->
    <!--    </style>-->
    <style>

        .card-icon-container {
            display: inline-block;
            font-size: 3rem;
        }

        .card-desc {
            font-weight: bold;
            float: right;
        }

        .card-title {
            margin-top: 0.3rem;
            line-height: 18px;
            color: rgba(0, 0, 0, 0.45);
            font-size: 1rem;
        }

        .card-count {
            margin-top: 0.75rem;
            color: #666;
            font-size: 1.25rem;
        }


    </style>
</head>
<body>
<div class="dashboard-container" id="echarts-app">
    <div class="container">
        <div>
            <div class="card-icon-container">
                <i class="iconfont el-icon-mywenzhang-copy" style="color: #40C9C6"></i>
                <div class="card-desc" style="margin-left: 30px">
                    <div class="card-title">总订单量</div>
                    <div class="card-count">{{orderCount}}</div>
                </div>
            </div>

            <div class="card-icon-container" style="margin-left: 145px">
                <i class="iconfont el-icon-mywenzhang-copy" style="color: #36A3F7"></i>
                <div class="card-desc"  style="margin-left: 30px">
                    <div class="card-title">总金额</div>
                    <div class="card-count">{{priceCount}}</div>
                </div>
            </div>

            <div class="card-icon-container" style="margin-left: 145px">
                <i class="iconfont el-icon-myuser" style="color: #34BFA3"></i>
                <div class="card-desc"  style="margin-left: 30px">
                    <div class="card-title">用户数量</div>
                    <div class="card-count">{{userCount}}</div>
                </div>
            </div>

            <div class="card-icon-container" style="margin-left: 145px">
                <i class="iconfont el-icon-myfangwenliang" style="color: #F4516C"></i>
                <div class="card-desc" style="margin-left: 30px">
                    <div class="card-title">员工数量</div>
                    <div class="card-count">{{empCount}}</div>
                </div>
            </div>
            <hr>
           <p></p>
            <div id="bar" style="width: 1000px;height:500px;"></div>
        </div>
    </div>
</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="../../plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="../../plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="../../plugins/axios/axios.min.js"></script>
<script src="../../js/request.js"></script>
<script src="../../api/order.js"></script>
<script src="../../js/echarts.min.js"></script>
<script>
new Vue({
    el: '#echarts-app',
    data() {
        return {
            orderCount:'',
            empCount:'',
            userCount:'',
            priceCount:'',
            dishList:[],
        }
    },
    computed: {},
    created() {
        this.getOrderCount()
        // this.ListDishEcharts()
        // this.initOneWeekLiuShui()

    },
    mounted() {
    },
   methods: {
       async getOrderCount() {
           const res = await getOrderCountApi()
           this.orderCount = res.data[1]
           this.priceCount = res.data[0]
          const Userres = await getUserCountApi()
           this.userCount = Userres.data
           const Empres = await getEmpCountApi()
           this.empCount = Empres.data
       },
       // async ListDishEcharts(){
       //     const res=await getDishListApi()
       //     this.dishList=res.data
       //     this.dishList.forEach(item=>{
       //        this.barOption.xAxis.data=item.name
       //         this.barOption.series[0].data=item.sales
       //         console.log(item.sales)
       //     })
           // console.log("数据1111")
           // console.log(res.data)
           // console.log(this.dishList)
       // },
       // async initOneWeekLiuShui(){
       //     let myChart = echarts.init(document.getElementById('bar'));
       //     let option = this.barOption
       //      myChart.setOption(option);
       // },
       // getOneWeekLiuShui(){
       //     getOneWeekLiuShuiApi().then(({data:res})=>{
       //         if (res.code === 0){
       //             this.oneWeekLiuShui.series[0].data = res.data.amount;
       //             this.oneWeekLiuShui.xAxis.data = res.data.days;
       //         }
       //     })
       // }

   }


})
</script>
<script src="../../../front/js/js.js"></script>
<script src="../../../front/js/jquery.js"></script>
<script type="text/javascript">
    $(function () {
        $.ajax({
            url:'http://localhost:8080/dish/dishList',
            dataType:'json',
            type:'get',
            async:true,
            success:function (res) {
               // res.data.forEach(item=>{
               //     barOption.xAxis.data=item.name
               //     barOption.series[0].data=item.sales
               // })
                let mapname = res.data.map(v => v.name);
                barOption.xAxis.data=mapname
                let mapsales = res.data.map(v => v.sales);
                barOption.series[0].data=mapsales
                myChart.setOption(barOption)
            }
        })
    })


    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('bar'));

    // 指定图表的配置项和数据
    var barOption = {
        title: {
            text: '菜品销量'
        },
        tooltip: {},
        toolbox:{
            feature:{
                //导出图片
                saveAsImage:{},
                //数据视图
                dataView:{},
                //重置
                restore:{},
                //区域缩放
                dataZoom:{},
                //图形转换
                magicType:{
                    type:['bar','line']

                }

            }

        },
        legend: {
            data: ['销量']
        },
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [
            {
                name: '销量',
                type: 'bar',
                data: []
            }
        ]
    };




       // for (let i = 0; i < res.length; i+=2) {
       //     barOption.xAxis.data=res.data[i]
       //     console.log("数据qqq")
       //     console.log(res.data[i])
       // }
       // for (let i = 1; i < res.length; i+=2) {
       //     barOption.series[0].data=res.data[i]
       // }




</script>

</body>
</html>